// import Home from "../page/Home";
import { Suspense, lazy } from "react";
// import Article from "../page/Article";
import Login from "../page/Login";
import Layout from '../page/Layout'
// import About from '../page/About'
// import Board from '../page/Board'
import NotFound from '../page/NotFound'
import { createBrowserRouter, createHashRouter } from "react-router-dom";
import { AuthRoute } from "../components/AuthRoute";

//lazy函数用于路由懒加载
const About=lazy(()=>import('../page/About'))
const Board=lazy(()=>import('../page/Board'))
const Article=lazy(()=>import('../page/Article'))
//createBrowserRouter创建的为history路由模式，createHashRouter创建的为hash路由模式
const router=createBrowserRouter([
  {
    path:'/',
    element:<AuthRoute><Layout/></AuthRoute>,
    children:[
      {
        path:'about',
        //Suspense组件用于包裹需要懒加载的组件
        element:<Suspense fallback={'加载中'}><About/></Suspense>
      },
      //使用场景：让二级路由一开始就随着一级路由一起渲染，默认路由。去掉path属性，使用index属性赋值true
      {
        index:true,
        element:<Suspense fallback={'加载中'}><Board/></Suspense>
      },
      // {
      //   path:'board',
      //   element:<Board/>
      // },
    ]
  },
  // {
  //   path:'/',
  //   element:<Home/>
  // },
  {
    path:'/login/:id/:name',
    element:<Login/>
  },
  {
    path:'/article',
    element:<Suspense fallback={'加载中'}><Article/></Suspense>
  },
  //'*'路径放在路由列表最后表示如果所有路由列表匹配不对，才匹配该路径
  {
    path:'*',
    element:<NotFound/>
  },
])
// router对象中有很多方法，包括跳转方法 router.navigate('/')
console.log(router)
export default router